<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>智慧团建导航</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: '微软雅黑', sans-serif;
            background-color: #f4f4f4;
        }

        #mapContainer {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
            border: 2px solid #ccc;
        }

        button, input[type="text"] {
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            width: calc(100% - 22px); /* Adjusting for padding and border */
        }

        button {
            background-color: #007bff;
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        #toggleButton {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1000;
            background-color: white;
            border: 1px solid #ccc;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 4px;
            font-weight: bold;
        }

        #searchBox {
            position: absolute;
            top: 60px;
            left: 10px;
            z-index: 1000;
            width: calc(25% - 22px);
        }
        
        #startPoint, #endPoint {
            position: absolute;
            left: 10px;
            z-index: 1000;
            width: calc(25% - 22px);
        }

        #startPoint {
            top: 110px; /* Adjusted position for start point input */
        }

        #endPoint {
            top: 160px; /* Adjusted position for end point input */
        }

        #getCurrentLocation {
            position: absolute;
            top: 210px;
            left: 10px;
            z-index: 1000;
            width: calc(25% - 22px);
        }

        #navigateButton {
            position: absolute;
            top: 260px;
            left: 10px;
            z-index: 1000;
            width: calc(25% - 22px);
        }

        @media(max-width: 600px) {
            #toggleButton, #searchBox, #startPoint, #endPoint, #getCurrentLocation, #navigateButton {
                width: calc(25% - 12px); /* Responsive adjustment */
            }
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=02POhUIHozM8hKnOsu3nc7U0pc5iAcC2"></script>
</head>
<body>
<div id="mapContainer">
    <div id="toggleButton">切换视图</div>
    <input id="searchBox" type="text" placeholder="搜索地点（如：浙江师范大学）"/>
    <input id="startPoint" type="text" placeholder="起点"/>
    <input id="endPoint" type="text" placeholder="终点"/>
    <button id="getCurrentLocation">获取当前位置</button>
    <button id="navigateButton">规划导航</button>
    <div id="map"></div>
</div>
<script type="text/javascript">
    var map = new BMapGL.Map("map");
    var is3DView = false;
    var currentMarker = null; 
    var startMarker = null; 
    var endMarker = null; 

    function initMap() {
        map.centerAndZoom('浙江师范大学', 12); 
        map.enableScrollWheelZoom(true); 
        var scaleControl = new BMapGL.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(scaleControl);
        var zoomControl = new BMapGL.ZoomControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
        map.addControl(zoomControl);
    }

    function switchView() {
        if (is3DView) {
            map.setHeading(0);
            map.setTilt(0);
            map.setZoom(12); 
            is3DView = false;
            document.getElementById("toggleButton").innerText = '切换到3D视图';
        } else {
            map.setHeading(64.5);
            map.setTilt(73);
            map.setZoom(19);
            is3DView = true;
            document.getElementById("toggleButton").innerText = '切换到2D视图';
        }
    }

    // 搜索功能
    document.getElementById("searchBox").addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
            var localSearch = new BMapGL.LocalSearch(map, {
                onSearchComplete: function(results) {
                    if (results.getCurrentNumPois() > 0) {
                        map.clearOverlays();
                        var point = results.getPoi(0).point;
                        currentMarker = new BMapGL.Marker(point);
                        map.addOverlay(currentMarker);
                        map.centerAndZoom(point, 16);
                    }
                }
            });
            localSearch.search(this.value);
        }
    });

    // 获取当前位置
    document.getElementById("getCurrentLocation").addEventListener("click", function() {
        var geolocation = new BMapGL.Geolocation();
        try {
            geolocation.getCurrentPosition(function(r) {
                if (r.point) {
                    // 清除地图上的所有覆盖物
                    map.clearOverlays();
                    
                    // 创建一个新的标记并添加到地图上
                    currentMarker = new BMapGL.Marker(r.point);
                    map.addOverlay(currentMarker);
                    
                    // 设置地图中心并缩放级别
                    map.centerAndZoom(r.point, 16);
                    
                    // 更新输入框的值
                    document.getElementById("startPoint").value =r.point.lng + ', ' + r.point.lat;
                    
                    // 提示用户成功获取位置
                    alert("成功获取当前位置");
                } else {
                    // 提示用户无法获取当前位置
                    alert('无法获取当前位置，请检查您的设备设置。');
                }
            }, {enableHighAccuracy: true});
        } catch (err) {
            // 提示用户浏览器不支持获取地理位置
            alert('该浏览器不支持获取地理位置。');
            console.log(err);
        }
    });
    document.getElementById("navigateButton").addEventListener("click", function() {
    var startPointInput = document.getElementById("startPoint").value;
    var endPointInput = document.getElementById("endPoint").value;

    if (!startPointInput || !endPointInput) {
        alert('请确保起点和终点都已填写！');
        return;
    }

    var startPoint, endPoint;

    // 判断起点和终点输入类型
    var startParts = startPointInput.split(',').map(Number);
    var endParts = endPointInput.split(',').map(Number);

    if (startParts.length === 2 && endParts.length === 2) {
        startPoint = new BMapGL.Point(startParts[0], startParts[1]);
        endPoint = new BMapGL.Point(endParts[0], endParts[1]);
    } else {
        var geoc = new BMapGL.Geocoder();

        if (startParts.length !== 2) {
            geoc.getPoint(startPointInput, function(point) {
                if (point) {
                    startPoint = point;

                    // 解析终点的经纬度
                    var endCoords = endPointInput.split(',').map(Number);
                    if (endCoords.length === 2) {
                        endPoint = new BMapGL.Point(endCoords[0], endCoords[1]);

                        // 进行导航
                        navigate(startPoint, endPoint);
                    } else {
                        geoc.getPoint(endPointInput, function(point) {
                            if (point) {
                                endPoint = point;
                                navigate(startPoint, endPoint);
                            } else {
                                alert('无法找到终点的经纬度，请检查地址是否正确！');
                            }
                        }, "杭州师范大学");
                    }
                } else {
                    alert('无法找到起点的经纬度，请检查地址是否正确！');
                }
            }, "杭州师范大学");
        } else {
            geoc.getPoint(endPointInput, function(point) {
                if (point) {
                    endPoint = point;

                    // 解析起点的经纬度
                    var startCoords = startPointInput.split(',').map(Number);
                    if (startCoords.length === 2) {
                        startPoint = new BMapGL.Point(startCoords[0], startCoords[1]);

                        // 进行导航
                        navigate(startPoint, endPoint);
                    } else {
                        geoc.getPoint(startPointInput, function(point) {
                            if (point) {
                                startPoint = point;
                                navigate(startPoint, endPoint);
                            } else {
                                alert('无法找到起点的经纬度，请检查地址是否正确！');
                            }
                        }, "杭州师范大学");
                    }
                } else {
                    alert('无法找到终点的经纬度，请检查地址是否正确！');
                }
            }, "杭州师范大学");
        }
    }
});

function navigate(startPoint, endPoint) {
    var driving = new BMapGL.DrivingRoute(map, {
        renderOptions: { map: map, autoViewport: true },
        onSearchComplete: function(results) {
            if (driving.getStatus() !== BMAP_STATUS_SUCCESS) {
                var statusMessage = getStatusMessage(driving.getStatus());
                alert('未找到合适的路线！状态码：' + driving.getStatus() + '，详细信息：' + statusMessage);
            }
        }
    });

    driving.search(startPoint, endPoint);
}

    function getStatusMessage(statusCode) {
        switch (statusCode) {
            case BMAP_STATUS_SUCCESS:
                return "成功";
            case BMAP_STATUS_CITY_LIST:
                return "城市列表";
            case BMAP_STATUS_UNKNOWN_LOCATION:
                return "未知地点";
            case BMAP_STATUS_UNKNOWN_ROUTE:
                return "未知路线";
            case BMAP_STATUS_INVALID_REQUEST:
                return "无效请求";
            case BMAP_STATUS_PERMISSION_DENIED:
                return "权限被拒绝";
            case BMAP_STATUS_INVALID_RESPONSE:
                return "无效响应";
            case BMAP_STATUS_NOT_FOUND:
                return "未找到";
            case BMAP_STATUS_CITY_NOT_SUPPORT:
                return "城市不支持";
            case BMAP_STATUS_USER_CANCELED:
                return "用户取消";
            case BMAP_STATUS_NETWORK_ERROR:
                return "网络错误";
                case BMAP_STATUS远超配额:
                return "远超配额";
            default:
                return "未知错误";
        }
    }

    // 切换视图按钮事件
    document.getElementById("toggleButton").addEventListener("click", switchView);

    // 初始化地图
    initMap();
</script>
</body>
</html>